<template>
  <div class="relation_doc_search">
    <div class="config_history_search">
      <el-form label-position="150px" label-width="150px">
        <div class="box" style="display: flex;  grid-gap: 1rem; gap: 1rem;">
          <div title="1">
            <el-form-item label="版本号">
              <el-col >
                <el-input v-model="queryParams.version" id="version" />
              </el-col>
            </el-form-item>
          </div>
          <div title="2">
            <el-date-picker
                v-model="queryParams.createdTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            />
          </div>
          <div title="3">
            <el-button class="useButton"  size="small" type="primary" @click="submit">查询</el-button>
            <el-button  type="primary" size="small"  @click="compare">对比</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="config_search_result">
      <el-table :stripe='true' :border='true' height="330" v-loading="loading" ref="multipleTable"
                :data="configHistoryData" tooltip-effect="dark" style="width: 100%" @selection-change="selectData">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column sortable prop="versionId" label="编号" width="80"/>

        <el-table-column sortable prop="fileZhName" label="中文名称" show-overflow-tooltip />

        <el-table-column sortable prop="version" label="版本号" show-overflow-tooltip/>

        <el-table-column sortable prop="createdTime" label="创建时间" show-overflow-tooltip/>

        <el-table-column sortable  label="操作" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-button size ="mini" type="text" icon="el-icon-view"   @click="detail(scope.row.versionId)">详情</el-button>
            <el-button size ="mini" type="text" icon="el-icon-search"   @click="download(scope.row.versionId)">下载</el-button>
          </template>
        </el-table-column>

        <span slot='append' v-show='showWarning'>
      <el-alert :title="warningMsg" type="warning">
      </el-alert>
    </span>
      </el-table>
      <!--分页-->
      <p-paging @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currPage='currPage' :pageSize="pageSize" :total='total'/>
    </div>
<!--    历史版本详情-->
    <el-dialog v-if="historyDetailShow" :visible.sync="historyDetailShow" width="30%" top="7vh" class="techDoc_dialog" @close="closeEdit" :before-close="handleClose"
               append-to-body="true" :close-on-click-modal="false" :destroy-on-close="true" >
      <span slot="title">
        <doc-header title="历史版本详情"></doc-header>
      </span>
      <p-config-history-detail @closeEdit="closeEdit" :versionId = 'versionId'></p-config-history-detail>
    </el-dialog>
    <el-dialog v-if="historyCompareShow" :visible.sync="historyCompareShow" width="100%" top="7vh" class="techDoc_dialog"
               append-to-body="true" :close-on-click-modal="false" :destroy-on-close="true" >
       <span slot="title" style="height:40%;overflow:auto;">
            <doc-header title="版本比对"/>
         <div  v-if="isExecl">
            <el-button  v-for="(item,index) in sheetNames"
                        :key="index"
                        :class="item"
                        @click="selected(index)">{{item}}
           </el-button>
            <p-diff-execl :data-group="[oldExeclData, newExeclData]" :columns="tableColumn" />
         </div>
            <p-diff-text :oldStr="old_value" :newStr = "new_value" v-if="!isExecl"/>
       </span>
    </el-dialog>
  </div>
</template>

<script>
import { versionPage, compareData } from '@/api/version/version'
import { download } from '@/api/file/file'
import DocHeader from '../../components/header/DocHeader'
import pPaging from '@/components/paging.vue'
import pConfigHistoryDetail from '@/views/history/ConfigHistoryDetail'
import pDiffExecl from '@/views/history/compare/ExeclCompare'
import pDiffText from '@/views/history/compare/TextCompare'
export default {
  name: 'version',
  components: {
    DocHeader,
    pPaging,
    pConfigHistoryDetail,
    pDiffExecl,
    pDiffText
  },
  data () {
    return {
      total: 0,
      historyDetailShow: false,
      versionId: '',
      queryParams: {
        pageNum: '',
        pageSize: '',
        version: '',
        configId: '',
        createdTime: []
      },
      // 默认第一页
      currPage: 1,
      pageSize: 10,
      //  配置分页数据
      configHistoryData: [],
      checkedList: [],
      showWarning: false,
      warningMsg: null,
      historyCompareShow: false,
      isExecl: true,
      sheetNames: [],
      oldExeclData: [],
      newExeclData: [],
      tableColumn: [],
      oldData: [],
      newData: [],
      tableColumns: [],
      old_value: '',
      new_value: ''
    }
  },
  props: ['configId'],
  created () {
    this.queryParams.configId = this.configId
    this.getData()
  },
  methods: {
    getData () {
      // 请求接口后取数据给tableData赋值
      // 请求的接口的参数给个参考
      this.queryParams.pageNum = this.currPage
      this.queryParams.pageSize = this.pageSize
      if (this.queryParams.createdTime === null) {
        this.queryParams.createdTime = []
      }
      versionPage(this.queryParams).then(res => {
        if (res.code === 0) {
          this.configHistoryData = res.data.list
          this.total = res.data.total
        }
      })
    },
    handleSizeChange (val1) {
      // 改变每页显示数量重新请求数据，重置当前页为第一页
      this.pageSize = val1
      this.currPage = 1
      this.getData()
    },
    handleCurrentChange (val) {
      // 点击改变当前页
      this.currPage = val
      this.getData()
    },
    submit () {
      this.getData()
    },
    detail (versionId) {
      this.historyDetailShow = true
      this.versionId = versionId
    },
    download (index) {
      download(index).then((res) => {
      })
    },
    closeEdit (val) {
      this.historyDetailShow = val
    },
    //  多选选中版本记录id
    selectData (value) {
      let isCompare = true
      this.checkedList.splice(0, this.checkedList.length)
      value.forEach(item => {
        this.checkedList.push(item.versionId)
        isCompare = isCompare && item.isCompare
      })
      if (!isCompare) {
        this.$message.error('当前文件为展示类文件，无法比对')
      } else {
        this.checkedList = this.checkedList.filter((item, index, arr) => {
          return arr.indexOf(item, 0) === index
        })
      }
    },
    //  比对版本信息
    compare () {
      if (this.checkedList.length !== 2) {
        this.$message.error('比对版本差异，仅可选择两条记录')
      } else {
        this.historyCompareShow = true
        compareData(this.checkedList).then(res => {
          if (res.code === 0) {
            let execl = res.data[0].isExecl
            this.isExecl = execl
            if (execl) {
              this.sheetNames = res.data[0].execlData.sheetNames
              this.tableColumns = res.data[0].execlData.tableColumns
              this.oldData = res.data[0].execlData.execlContent
              this.newData = res.data[1].execlData.execlContent
              this.selected(0)
            } else {
              this.old_value = res.data[0].textContent[0]
              this.new_value = res.data[1].textContent[0]
            }
          }
        })
      }
    },
    //  sheet 页数据绑定
    selected (index) {
      this.oldExeclData.splice(0, this.oldExeclData.length)
      this.newExeclData.splice(0, this.newExeclData.length)
      this.tableColumn.splice(0, this.tableColumn.length)
      for (let i = 0; i < this.oldData[0].length; ++i) {
        if (this.oldData[index][i] != null) {
          this.oldExeclData.push(this.oldData[index][i])
        }
      }

      for (let i = 0; i < this.newData[0].length; ++i) {
        if (this.newData[index][i] != null) {
          this.newExeclData.push(this.newData[index][i])
        }
      }

      for (let i = 0; i < this.tableColumns[0].length; ++i) {
        if (this.tableColumns[index][i] != null) {
          this.tableColumn.push(this.tableColumns[index][i])
        }
      }
    }
  }
}
</script>

<style lang='postcss'>
.box {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  min-height: 100px;
}
.box > div {
  height: 22px;
  flex: 1;
}
.relation_doc_search{
  min-height: 100px;
  margin-top: 30px;
}
.config_history_search{
  min-height: 100px;
}
.config_search_result{
  margin:0;
  border:0;
  padding:0;
  min-height: 100px;
  }

</style>
